.px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
}
@back:white;
@top: 20;
@left: 3%;
body{
    background: #ededed;
}
.header{
    .px2rem(height, 92);
    background: @back;
    .px2rem(line-height, 92);

    .left{
        float: left;
        .px2rem(font-size, 40);
        margin-left: 3%;
    }

    .right{
        float: right;
        margin-right: 3%;
        .px2rem(font-size, 40);
    }
    
}

.goods{
    background:@back;
    .px2rem(padding-bottom, 60);
    .wrapper{
        img{
            .px2rem(height, 612);
            width: 100%;
        }
    }
    h3{
        .px2rem(font-size, 37);
        .px2rem(margin-top, 95);
        margin-left: 3%;
    }
    .price{
        color: #7f1085;
        .px2rem(font-size, 40);
        margin-left: 3%;
        .px2rem(margin-top, 35);
        .px2rem(margin-bottom, 30);
    }
    .phone{
        margin-left: @left;
        span:first-child{
            border: 1px solid #7f1085;
            color: #7f1085;
            margin: 0;
            i{
            background: #7f1085;
            color: white;
            .px2rem(padding-left, 3);
            .px2rem(padding-right, 3);
            }
        }
        s{
            color: #999999;
            .px2rem(font-size, 20);
        }
    }
    .address{
        .px2rem(margin-top, 50);
        .px2rem(font-size, 28);
        margin-left: @left;
        span{
            float: right;
            margin-right: 3%;
        }
    }
}

.delivery{
    background: @back;
    .px2rem(height, 85);
    margin-top: 1px;
    .px2rem(font-size, 26);
    padding-left: 5%;
    .px2rem(line-height, 85);
    li{
        width: 26%;
        float: left;
    }
}

.instruc{
    background: @back;
    .px2rem(height, 86);
    .px2rem(line-height, 86);
    .px2rem(font-size, 26);
    padding-left: @left;
    a{
        color: #7f1085;
    }

}


.colors{
    background: @back;
    .px2rem(height, 194);
    .px2rem(margin-top, @top);
    h3{
        .px2rem(font-size, 32);
        .px2rem(line-height, 100);
        padding-left: @left;
    }
    .bottom{
        position: relative;
        section{
            float: left;
            .px2rem(width, 96);
            .px2rem(height, 46);
            .px2rem(line-height, 46);
            text-align: center;
            background: #ececec;
            .px2rem(font-size, 24);
            margin-left: @left;
        }
        .red{
            
        }
        .beige{
            
        }
    }
}

.product{
    background: @back;
    .px2rem(margin-top, @top);
    .px2rem(margin-bottom, 108);
    h2{
        .px2rem(font-size, 32);
        .px2rem(line-height, 100);
        padding-left: @left;
    }
    img{
        width: 100%;
    }
}

.footer{
    background: @back;
    .px2rem(height, 98);
    display: flex;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    .px2rem(font-size, 32);
    text-align: center;
    section{
        height: 100%;
    }
    .left{
        flex: 1;
        border-right: 1px solid #ccc;
        dl{
            dd{
                a{
                    .px2rem(font-size, 36);
                    color: #7f1085;
                }
            }
            dd:first-child{
                .px2rem(margin-top, 20);
            }
        }
    }
    .center{
        flex: 2;
        color: #7f1085;
        .px2rem(line-height, 98);
    }
    .right{
        flex: 2;
        background: #7f1085;
        color: @back;
        .px2rem(line-height, 98);
    }
}